/**
 * Created by Administrator on 2017/6/13.
 */
/**
 *  自定义指令的类型 :  E   元素
 *                               A  属性
 *                               C  类名
 *                               M  注释 ---------  写法：<!-- directive:指令名字 -->
 *  replace : 是否替换原有的标签   如果为true时，需要必须在模板最外层里边添加一个
 *               外层标签
 *
 *  template： 模板指令
 *
 *  templateUrl  :  引入一个外面的html模板链接
 *
 *  transclude (boolean类型) : 默认为false，是否嵌入标签内部的内容 ； 如果为true，需要使用ng-transclude指令标识元素用来存放原有的内容；如果为false，就会被清除掉并且会被覆盖
 *
 *  compile (函数)   :   参数： element , attr , transclude  分别是该指令最外层标签的angular DOM对象、最外层标签中的属性（对象）、
 *                              如果transclude为true，transclude参数为标签内部内容
 */
angular
    .module('myApp', [], ['$compileProvider', function ($compileProvider) {
        $compileProvider.directive('helloWorld', function () {
            return {
                restrict: 'AECM',
                replace: true,
                template: '<h1>Hello World!</h1>',
                compile: function () {
                    console.log(1)
                }
            }
        })

        $compileProvider.directive('transClude', function () {
            return {
                restrict: 'E',
                replace: true,
                template: "<div>template数据 <sapn ng-transclude></sapn></div>",
                transclude: true
            }
        })


        // 自定义指令中的compile和link方法
        $compileProvider.directive('customTags', function () {
            return {
                restrict: 'ECMA',
                replace: true,
                // template: '<div ng-repeat="user in users" class="bg-primary"><h1>{{user.name}} </h1><sapn ng-transclude></sapn></div>',
                template: ' <div><div ng-repeat="user in users" class="bg-primary"><h1>{{user.name}} </h1></div><sapn ng-transclude></sapn></div>',
                transclude: true,
                compile : function (element , attr , transclude) {
                    // 此方法用来对模板自身进行转换，仅仅在编译阶段运行一次
                    // 此方法主要在页面做一些复杂的操作  DOM操作
                    console.log(element)
                    console.log(attr)
                    console.log(transclude);
                    $(element).children().eq(0).append(angular.element('<div>可你曾经那么爱我干嘛演出细节</div>'))
                },
                link:function () {
                    // link 在页面中做事件触发

                }
            }
        })


        $compileProvider.directive('controllerTags',function () {
            return {
                restrict : 'ECMA',
                replace : true,
                template : '<div class="bg-success">controllerTags</div>',
                controller : function ($scope) {
                    console.log($scope);
                    this.name = "这是controllerTags中的属性";
                    this.age = function () {
                        alert('我今年24岁');
                    }
                },
                link : function (scope, element, attr, controllerAS) {
                    console.log(scope);
                    $(element).click(function () {
                        controllerAS.age();
                        alert(controllerAS.name);
                    });
                }
            }
        })
    }])
    .controller('MyController', function ($scope) {
        console.log($scope);
        $scope.name = '朱明宇';
        $scope.users = [
            {
                id: 123,
                name: '朱明宇'
            },
            {
                id: 456,
                name: '李俊'
            },
            {
                id: 789,
                name: '宋玉清'
            }
        ];
    });